<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix">
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Inputmasks输入格式化</h1>
        <section class="markdown">
            <p>inputmask 是一个 jQuery 输入插件，用于创建确保让用户能够按预先定义好格式输入的文本框。这些格式可以是日期，数字，电话号码等。</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
                        <script src="dist/lib/jquery/jquery-inputmask/jquery.inputmask.bundle.js"></script>
                        <script src="dist/lib/jquery/jquery-inputmask/inputmask.date.extensions.js"></script>
                        <script src="dist/lib/jquery/jquery-inputmask/inputmask.phone.extensions.js"></script>
<div class="box box-danger">
    <div class="box-header">
        <h3 class="box-title">Input masks</h3>
    </div>
    <div class="box-body">
        <!-- Date dd/mm/yyyy -->
        <div class="form-group">
            <label>Date masks:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask="">
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
        <!-- Date mm/dd/yyyy -->
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="">
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
        <!-- phone mask -->
        <div class="form-group">
            <label>US phone mask:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-phone"></i>
                </div>
                <input type="text" class="form-control" data-inputmask="&quot;mask&quot;: &quot;(999) 999-9999&quot;" data-mask="">
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
        <!-- phone mask -->
        <div class="form-group">
            <label>Intl US phone mask:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-phone"></i>
                </div>
                <input type="text" class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="">
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
        <!-- IP mask -->
        <div class="form-group">
            <label>IP mask:</label>
            <div class="input-group">
                <div class="input-group-addon">
                    <i class="fa fa-laptop"></i>
                </div>
                <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="">
            </div>
            <!-- /.input group -->
        </div>
        <!-- /.form group -->
    </div>
    <!-- /.box-body -->
</div>
<script type="text/javascript">
//Datemask dd/mm/yyyy
$('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
//Datemask2 mm/dd/yyyy
$('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
//Money Euro
$('[data-mask]').inputmask()
</script>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认掩码定义</a></div>
                    <div>
                        <p>
                          9 : 数字,a : 按字母顺序排列,* : 字母数字 {}:重复
                        </p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-danger&quot;&gt;
    &lt;div class=&quot;box-header&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Input masks&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box-body&quot;&gt;
        &lt;!-- Date dd/mm/yyyy --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Date masks:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-inputmask=&quot;&#x27;alias&#x27;: &#x27;dd/mm/yyyy&#x27;&quot; data-mask=&quot;&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- Date mm/dd/yyyy --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-calendar&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-inputmask=&quot;&#x27;alias&#x27;: &#x27;mm/dd/yyyy&#x27;&quot; data-mask=&quot;&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- phone mask --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;US phone mask:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-inputmask=&quot;&amp;quot;mask&amp;quot;: &amp;quot;(999) 999-9999&amp;quot;&quot; data-mask=&quot;&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- phone mask --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;Intl US phone mask:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-inputmask=&quot;&#x27;mask&#x27;: [&#x27;999-999-9999 [x99999]&#x27;, &#x27;+099 99 99 9999[9]-9999&#x27;]&quot; data-mask=&quot;&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
        &lt;!-- IP mask --&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label&gt;IP mask:&lt;/label&gt;
            &lt;div class=&quot;input-group&quot;&gt;
                &lt;div class=&quot;input-group-addon&quot;&gt;
                    &lt;i class=&quot;fa fa-laptop&quot;&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; data-inputmask=&quot;&#x27;alias&#x27;: &#x27;ip&#x27;&quot; data-mask=&quot;&quot;&gt;
            &lt;/div&gt;
            &lt;!-- /.input group --&gt;
        &lt;/div&gt;
        &lt;!-- /.form group --&gt;
    &lt;/div&gt;
    &lt;!-- /.box-body --&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//Datemask dd/mm/yyyy
$(&#x27;#datemask&#x27;).inputmask(&#x27;dd/mm/yyyy&#x27;, { &#x27;placeholder&#x27;: &#x27;dd/mm/yyyy&#x27; })
//Datemask2 mm/dd/yyyy
$(&#x27;#datemask2&#x27;).inputmask(&#x27;mm/dd/yyyy&#x27;, { &#x27;placeholder&#x27;: &#x27;mm/dd/yyyy&#x27; })
//Money Euro
$(&#x27;[data-mask]&#x27;).inputmask()
&lt;/script&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>